<template>
  <view class="page">
    <custom-form class="form" ref="formRef">
      <custom-form-item
        label="手机号"
        placeholder="手机号"
        v-model="form.phoneNumber"
        :rule="/\d{8,}/"
        prop="phoneNumber"
      >
        <template #input-left>
          <international-phone-prefix-selector v-model="form.phoneAreaCode" :is-custom-page-top="false">
            +{{ form.phoneAreaCode }}
            <uni-icons custom-prefix="iconfont" type="icon-down" size="15"></uni-icons>
          </international-phone-prefix-selector>
        </template>
      </custom-form-item>
      <custom-form-item label="验证码" placeholder="请输入验证码" v-model="form.code" :rule="/\d+/">
        <template #input-right>
          <send-code-button :send-code="sendCode" class="send-code">
            <template v-slot="{ remainder }">
              <span :style="{ color: remainder > 0 ? '#999999' : '#ff644d' }">{{
                remainder > 0 ? `${remainder}秒后可重发` : '获取验证码'
              }}</span>
            </template>
          </send-code-button>
        </template>
      </custom-form-item>
      <custom-form-item label="报名人" placeholder="姓名" v-model="form.fullName" :rule="/.+/"> </custom-form-item>
      <custom-form-item
        label="密码&nbsp;&nbsp;&nbsp;"
        placeholder="登录密码"
        :password="true"
        v-model="form.password"
        :rule="/.{3,}/"
      ></custom-form-item>
      <custom-form-item label="工作类型" :column="true" v-model="form.type">
        <template #default="{ value }">
          <view class="work-type">
            <view class="type-item" :class="{ active: value === 1 }" @click="form.type = 1">
              <span>全职专送</span>
              <span class="desc">海量订单，收入丰厚</span>
            </view>
            <view class="type-item" :class="{ active: value === 2 }" @click="form.type = 2">
              <span>兼职众包</span>
              <span class="desc">自由接单，多劳多得</span>
            </view>
          </view>
        </template>
      </custom-form-item>
      <custom-form-item
        v-model="workLocation"
        label="工作地点"
        placeholder="获取位置"
        disabled
        :rule="/.+/"
        @click-input="clickInput"
      >
        <template #input-right>
          <image src="@/static/image/register/map.svg" class="map-icon" />
        </template>
      </custom-form-item>
    </custom-form>
    <view class="control">
      <shake-text class="agreement" ref="shakeTextRef">
        <checked-switch v-model="isAgreeAgreement" />
        <span style="color: #999">我已阅读并同意</span><span style="color: #ff644d">《spark配送报名说明》</span>
      </shake-text>
      <view class="submit" @click="submitForm">立即提交</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CustomForm from '@/components/custom-form/index.vue'
import InternationalPhonePrefixSelector from '@/components/international-phone-prefix-selector/index.vue'
import SendCodeButton from '@/components/send-code-button/index.vue'
import CustomFormItem from '@/components/custom-form-item/index.vue'
import CheckedSwitch from '@/components/checked-switch/index.vue'
import { RiderSignUp } from '@/types/param/rider'
import $API from '@/api'
import PropertiesCopyUtils from '@/utils/PropertiesCopyUtils'
import { $modal } from '@/plugins'
import ShakeText from '@/components/shake-text/index.vue'
const shakeTextRef = ref()
const workLocation = ref('')
const form = ref(new RiderSignUp())
const isAgreeAgreement = ref(false)
async function sendCode() {
  if (!formRef.value.validateFields(['phoneNumber'])) {
    throw new Error('请输入手机号')
  }
  const result = await $API.rider.sendCodeForRiderRegister(form.value.phoneAreaCode, form.value.phoneNumber)
  if (!result.success) {
    $modal.toastErrorMsg('发送短信失败，请联系管理员！')
    throw new Error(result.message)
  }
}
function clickInput() {
  uni.authorize({
    scope: 'scope.userLocation',
    success: (success) => {
      uni.chooseLocation({
        success: async function (res) {
          const result = await $API.thirdParty.parseGEO(res.longitude, res.latitude)
          PropertiesCopyUtils.copy([result], form.value)

          workLocation.value = result.cityName + result.districtName
        }
      })
    }
  })
}
const formRef = ref()
// 提交表单
async function submitForm() {
  // 表单验证
  if (!formRef.value.validate()) return
  if (!isAgreeAgreement.value) {
    shakeTextRef.value.triggerShake()
    return
  }
  const result = await $API.rider.register(form.value)
  if (result.success) {
    uni.redirectTo({ url: '/pages/login/index' })
    return
  }
  $modal.toastErrorMsg(result.message)
}
</script>

<style scoped lang="scss">
.page {
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f7;

  .form {
    display: block;
    padding: 0 30rpx;
    background-color: #fff;

    .map-icon {
      margin-left: 10rpx;
      width: 30rpx;
      height: 30rpx;
    }

    .work-type {
      display: flex;
      justify-content: space-between;
      margin: 10px auto 20px;
      width: 90vw;

      .active {
        border: 1px solid rgb(244 195 186 / 100%) !important;
        color: rgb(255 100 77) !important;
        background-color: rgb(250 245 245 / 100%) !important;

        .desc {
          color: inherit !important;
        }
      }

      .type-item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        width: 48%;
        font-size: 25rpx;
        border: 1px solid transparent;
        border-radius: 6px;
        background-color: #f7f7f7;
        flex-direction: column;
        line-height: 35rpx;

        .desc {
          color: #999;
        }
      }
    }
  }

  .control {
    padding: 0 25rpx;
    box-sizing: border-box;

    .agreement {
      display: block;
      margin: 15px 0;
      font-size: 24rpx;
    }

    .submit {
      height: 90rpx;
      border-radius: 8px;
      text-align: center;
      color: #fff;
      background: linear-gradient(
        90deg,
        rgb(255 153 0 / 100%) 0%,
        rgb(255 153 0 / 100%) 0%,
        rgb(254 70 1 / 100%) 100%,
        rgb(254 70 1 / 100%) 100%
      );
      line-height: 90rpx;
    }
  }
}
</style>
